<template>
    <div class="cart">
        <div class="cartList">
            <van-swipe-cell v-for="item in newCartList" :key="item.id">
				<van-checkbox v-model="item.checked"></van-checkbox>
                <van-card
                    :num="item.count"
                    :price="item.price"
                    :desc="item.content"
                    :title="item.title"
                    :thumb="item.image"
                    class="goods-card"
                >
                    <template #footer>
                        <van-button size="mini" @click="setCartCount(item, -1)"
                            >-</van-button
                        >
                        <van-button size="mini" @click="setCartCount(item, 1)"
                            >+</van-button
                        >
                    </template>
                </van-card>

                <template #right>
                    <van-button
                        square
                        text="删除"
                        type="danger"
                        class="delete-button"
						@click="deleteCart(item.id)"
                    />
                </template>
            </van-swipe-cell>
        </div>
        <van-submit-bar  style='bottom:50px' :price="allPrice*100" button-text="提交订单">
        <van-checkbox v-model="checked">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cartList: [],
            timer: {},
			
        }
    },
    created() {
        this.getCartList()
    },
	computed: {
		newCartList() {
			return this.cartList.map(item=> {
				this.$set(item, 'checked', false); // 添加一个被劫持的数据 可以触发视图更新
				return item
			})
		},
		checked:{
			get() {
				// 反选
				return this.newCartList.every(item => item.checked)
			},
			set(val) {
				// 全选
				this.newCartList.forEach(item => item.checked= val)
			}
		},
        allPrice() {
            return this.newCartList.reduce((prev,next)=> {
                return prev+=next.checked? (next.count*next.price) : 0
            },0)
        }
	},
    methods: {
        getCartList() {
            this.$api.getCartList({ user_id: this.$store.state.user.userData.data.id }).then((res) => {
                this.cartList = res.data
            })
        },
        setCartCount(item, num) {
            // 第一层优化防抖
            item.count += num; // 这里由于是引用类型 所以修改的时候 视图也会更新
			// 因为每条数据都需要防抖 所以timer是个对象  有一条就加一个
            clearTimeout(this.timer[item.id])
            this.timer[item.id] = setTimeout(() => {
                this.$api
                    .setCartCount({
                        id: item.id,
                        count: item.count,
                    })
                    .then((res) => {
                        if (res.code === 1) {
                            // this.getCartList()
                        } else {
                            // 如果接口崩了  重新刷新一遍列表
                            this.getCartList()
                        }
                    })
                    .catch((err) => {
                        this.getCartList()
                    })
            }, 800)
        },
		deleteCart(id) {
			this.$api.delCart(id).then(res=>{
				if(res.code===1) {
					console.log('删除成功')
					// 如果后台到前端准确答复
					// 前端就不需要再掉一次接口
					// 直接操作前端删除数据即可
					const ind = this.cartList.findIndex(item =>item.id===id)
					this.cartList.splice(ind,1)
				} else {
					console.log('删除失败')
				}
			})
		}
    },
}
</script>

<style>
.goods-card {
    margin: 0;
    background-color: #fff;
}

.delete-button {
    height: 100%;
}
</style>